<ion-header>

  <ion-toolbar>
    <ion-title>Icons</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content>

  <ion-list>

    <ion-item>
      <ion-icon name="home" [color]="dynamicColor" item-start></ion-icon>
      <code>
        name="home"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="home" isActive="true" item-start></ion-icon>
      <code>
        name="home" isActive="true"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon [name]="homeIcon" [isActive]="isActive" item-start></ion-icon>
      <code>
        [name]="homeIcon" [isActive]="isActive" (false)
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="md-home" isActive="false" item-start></ion-icon>
      <code>
        name="md-home" isActive="false"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="ios-home" isActive="false" item-start></ion-icon>
      <code>
        name="ios-home" isActive="false"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="ios-home" item-start></ion-icon>
      <code>
        name="ios-home"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="ios-home-outline" item-start></ion-icon>
      <code>
        name="ios-home-outline"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="ios-home-outline" isActive="false" item-start></ion-icon>
      <code>
        name="ios-home-outline" isActive="false"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="md-home" color="primary" item-start></ion-icon>
      <code>
        name="md-home"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon name="logo-twitter" color="secondary" item-start></ion-icon>
      <code>
        name="logo-twitter"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon ios="logo-apple" md="logo-android" item-start></ion-icon>
      <code>
        ios="logo-apple" md="logo-android"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon ios="md-color-filter" md="ios-color-filter" item-start></ion-icon>
      <code>
        ios="md-color-filter" md="ios-color-filter"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon ios="md-color-filter" md="ios-color-filter" isActive="false" item-start></ion-icon>
      <code>
        ios="md-color-filter" md="ios-color-filter" isActive="false"
      </code>
    </ion-item>

    <ion-item>
      <ion-icon item-start></ion-icon>
      <code>
        name="null"
      </code>
    </ion-item>

    <ion-item detail-push>
      <code>
        ion-item w/ [detail-push] attr. text text text text text text
      </code>
    </ion-item>


  </ion-list>

  <p>
    <button ion-button icon-start (click)="updateIcon()">
      <ion-icon [name]="btnIcon"></ion-icon>
      Update icon
    </button>
  </p>

</ion-content>


<style>
  /*to ensure ng css encapsulation doesn't mess with icon attributes*/
  code {
    font-size: 0.8em;
  }
</style>
